<template>
    <el-dialog
    :title="`配置${name}`"  
    v-dialogDrag 
    :visible.sync="dialogVisible" 
    width="1200px"
    >
        <div class="set-wrapper">
            <!-- 左侧测点选择区域 -->
            <div class="set-left">
                <div class="section-header">
                    <h3>测点选择</h3>
                    <el-tooltip effect="dark" content="选择测点分类方式" placement="top">
                        <i class="el-icon-info"></i>
                    </el-tooltip>
                </div>
                
                <div class="menu-select">
                    <el-select 
                        v-model="selectTreeType" 
                        placeholder="请选择测点分类" 
                        size="small" 
                        @change="handleChangeTreeType" 
                        style="width:100%">
                        <el-option 
                            v-for="(item,index) in treeTypeList" 
                            :key="index" 
                            :label="item" 
                            :value="item">
                        </el-option>
                    </el-select>
                </div>
                
                <div class="tree-container">
                    <div class="tree-header">
                        <span>测点列表</span>
                    </div>
                    <div class="tree custom-tree-container">
                        <el-tree 
                            :data="dialogMenu" 
                            :expand-on-click-node="false"
                            :default-expand-all="true"
                            ref="tree">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <div class="node-content">
                                    <span class="node-name">{{ data.node.treeName }}</span>
                                    <div class="node-actions" v-if="data.node.isBottom">
                                        <el-tooltip class="item" effect="dark" content="加入配置" placement="top">
                                             <i class="el-icon-circle-plus-outline blueText" style="font-size:16px;"  @click="handleAppendLine(data.node)"></i>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </span>
                        </el-tree>
                    </div>
                </div>
            </div>
            
            <!-- 右侧配置区域 -->
            <div class="set-right">
                <div class="section-header">
                    <h3>测点配置</h3>
                    <span class="selected-count" v-if="lineSetList.length > 0">
                        已选择 {{lineSetList.length}} 个测点
                    </span>
                </div>
                
                <!-- 空状态提示 -->
                <div v-if="lineSetList.length == 0" class="empty-state">
                    <noData showData description="点击左侧测点列表中的'+'按钮添加测点进行配置"></noData>
                </div>
                
                <!-- 测点标签页 -->
                <div v-show="lineSetList.length > 0" class="tabs-container">
                    <el-tabs 
                        v-model="tabsValue" 
                        type="card" 
                        closable 
                        @tab-click="handleSelectTab" 
                        @tab-remove="handleRemoveTag"
                        class="config-tabs">
                        <el-tab-pane
                            v-for="(item,index) in lineSetList"
                            :key="item.codeId"
                            :label="item.pointName"
                            :name="item.codeId.toString()"
                            :data-item="JSON.stringify(item)"
                            :data-index="index">
                            <div class="tab-badge" v-if="item.COMP">{{item.COMP}}</div>
                        </el-tab-pane>
                    </el-tabs>
                    
                    <!-- 配置表单 -->
                    <div class="config-form-container" v-if="lineSetList.length > 0">
                        <el-form ref="menuForm" label-width="120px" size="medium" class="config-form" inline>
                            <el-form-item label="显示排序">
                                <div class="form-item-with-tip">
                                    <el-input-number 
                                        v-model="lineSetList[TabIndex].index"  
                                        size="small" 
                                        :min="1" 
                                        :max="100"
                                        controls-position="right">
                                    </el-input-number>
                                    <el-tooltip effect="dark" content="数值越小，在图表中显示越靠前" placement="top">
                                        <i class="el-icon-question"></i>
                                    </el-tooltip>
                                </div>
                            </el-form-item>
                            
                            <el-form-item label="Y轴位置">
                                <el-radio-group v-model="lineSetList[TabIndex].axisTp" @change="handleChangeYLine">
                                    <el-radio :label="1">
                                        <span>左Y轴</span>
                                        <el-tooltip effect="dark" content="使用左侧Y轴刻度" placement="top">
                                            <i class="el-icon-info"></i>
                                        </el-tooltip>
                                    </el-radio>
                                    <el-radio :label="2">
                                        <span>右Y轴</span>
                                        <el-tooltip effect="dark" content="使用右侧Y轴刻度" placement="top">
                                            <i class="el-icon-info"></i>
                                        </el-tooltip>
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                            <el-form-item label="数据分量">
                                <div class="comp-selector">
                                    <div class="selector-header">
                                        <span>选择分量</span>
                                        <span class="count">{{pointCompList.length}}个分量</span>
                                    </div>
                                    <div class="comp-list">
                                        <div 
                                            v-for="item in pointCompList" 
                                            :key="item.id" 
                                            class="comp-item"
                                            :class="{'active': item.comp == lineSetList[TabIndex].COMP}"
                                            @click="handleChangePointComp(item)">
                                            <div class="comp-name">{{ item.comp }} ({{ item.compName }})</div>
                                        </div>
                                        <div v-if="pointCompList.length === 0" class="no-comps">
                                            该测点暂无可用分量
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                            
                            <el-form-item label="线条样式">
                                <div class="line-style-config">
                                    <div class="color-config">
                                        <span class="label">颜色</span>
                                        <el-color-picker 
                                            v-model="lineSetList[TabIndex].color"
                                            show-alpha
                                            :predefine="predefineColors">
                                        </el-color-picker>
                                        <span class="color-value">{{lineSetList[TabIndex].color}}</span>
                                    </div>
                                    <div class="width-config">
                                        <span class="label">粗细</span>
                                        <el-slider 
                                            v-model="lineSetList[TabIndex].blod" 
                                            :min="1" 
                                            :max="10" 
                                            :show-tooltip="true"
                                            class="width-slider">
                                        </el-slider>
                                        <span class="width-value">{{lineSetList[TabIndex].blod}}px</span>
                                    </div>
                                </div>
                            </el-form-item>
                            
                            <el-form-item label="测点图标">
                                <div class="icon-selector">
                                    <div 
                                        v-for="icon in iconOptions" 
                                        :key="icon.value"
                                        class="icon-option"
                                        :class="{'active': lineSetList[TabIndex].icon == icon.value}"
                                        @click="handleSelectIcon(icon.value)">
                                        <div class="icon-preview">
                                            <i v-if="icon.value !== '0'" v-html="icon.class" class="iconfont"></i>
                                        </div>
                                        <div class="icon-name">{{icon.name}}</div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="dialog-footer">
            <div class="footer-info" v-if="lineSetList.length > 0">
                <i class="el-icon-info"></i>
                已配置 {{lineSetList.length}} 个测点，点击保存应用配置
            </div>
            <div>
                <el-button @click="dialogVisible = false" size="small" icon="el-icon-circle-close" class="cancel-btn">取消</el-button>
                <el-button 
                    type="primary" 
                    @click="handleSetLineData" 
                    size="small" 
                    :disabled="lineSetList.length === 0"
                    icon="el-icon-upload" class="confirm-btn">
                    保存配置
                </el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {GetTreeInstr,GetTreeStyle,getPointComps,setLineInfos } from "@/api/https";
import noData from '@/components/base/noData.vue'
export default ({
    components:{noData},
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        linesDialogForm:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        name:{
            type:String,
            default:''
        },
        stationId:{
            type:[String,Number],
            default:''
        },
        lineId:{
            type:Number,
            default:0
        },
        setDataForm:{
            type:Array,
            default:()=>{
                return []
            }
        },
        isSetting:{
            type:Boolean,
            default:false
        }
    },
    mounted(){
        
    },
    watch: {
        visible(newVal) {
            if(newVal){
                this.dialogVisible = newVal
                this.handleGetTreeStyle()
                this.getDefaultData()
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
        },
    },
    data() {
        return {
            dialogVisible:this.visible,
            treeTypeList:[],
            selectTreeType:'',
            dialogMenu:[],
            TabIndex:0,
            tabsValue:'',
            lineSetList:[],
            pointCompList:[],
            searchText: '',
            predefineColors: [
                '#0023F5','#3580BB','#EA3FF7','#000000','#EB3324',
                '#F08650','#A1FA4F','#732BF5','#377D22','#808080',
                '#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1',
                '#1e90ff','#c71585','rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
            ],
            iconOptions: [
                {value: '0', name: '无形状', class: ''},
                {value: '1', name: '实心圆形', class: '&#xe64f;'},
                {value: '2', name: '空心圆形', class: '&#xe628;'},
                {value: '3', name: '实心方形', class: '&#xeaa2;'},
                {value: '4', name: '空心方形', class: '&#xea98;'},
                {value: '5', name: '实心三角', class: '&#xe6af;'},
                {value: '6', name: '空心三角', class: '&#xe710;'},
                {value: '7', name: '实心菱形', class: '&#xe63c;'},
                {value: '8', name: '空心菱形', class: '&#xe63d;'},
            ]
        }
    },
    methods:{
        handleChangeTreeType(val){
            this.selectTreeType = val
            this.handleGetTreeInstr()
        },
        handleGetTreeStyle(){
            GetTreeStyle(this.stationId).then(res=>{
                if(res.isSuccess){
                    this.treeTypeList = res.data
                    this.selectTreeType = res.data[0]
                    this.handleGetTreeInstr()
                }
            });
        },
        handleGetTreeInstr(){
            GetTreeInstr(this.stationId,this.selectTreeType).then(res=>{
                if(res.isSuccess){
                    this.dialogMenu = res.data
                }
            })
        },
        handleAppendLine(data){
            const len = this.lineSetList.length + 1
            const colorIndex = (len - 1) % this.predefineColors.length
            const color = this.predefineColors[colorIndex]
            
            const _data = {
                id:0,
                pointName:data.treeName,
                codeId:data.codE_ID,
                INSTR_ID:0,
                unit:'',
                COMP:'',
                axisTp:1,
                color:color || '#f00',
                blod: 2,
                icon:'0',
                index: len
            }
            
            if(this.lineSetList.length > 0){
                const index = this.lineSetList.findIndex(item=>item.codeId == data.codE_ID)
                if(index == -1){
                    this.lineSetList.push(_data)
                }else{
                    this.$message.warning('该测点已添加')
                    return false
                }
            }else{
                this.lineSetList.push(_data)
            }
            
            this.onGetPointComps(data.codE_ID)
            this.tabsValue = data.codE_ID.toString()
            this.TabIndex = len - 1
        },
        getDefaultData(){
            if(this.setDataForm.length > 0){
                this.tabsValue = this.setDataForm[0].codeID.toString()
                this.TabIndex = 0
                this.onGetPointComps(this.setDataForm[0].codeID)
                const _list = []

                this.setDataForm.forEach(item=>{
                    const _data = {
                        ID:item.id || 0,
                        codeId:item.codeID,
                        INSTR_ID:item.instR_ID,
                        LineID:this.lineId || 0,
                        pointName:item.pointName,
                        unit:item.unit,
                        COMP:item.COMP,
                        dtModeID:this.setDataForm[0].DtModeID,
                        DT1:'',
                        DT2:'',
                        axisTp:item.axisTp,
                        color:item.color || '',
                        blod:item.blod || 1,
                        icon:item.icon,
                        index:item.index
                    }
                    _list.push(_data)
                })
                this.lineSetList = [..._list]
            }else{
                this.tabsValue = ''
                this.TabIndex = 0
            }
        },
        handleSelectTab(tab){
            const data =  JSON.parse(tab.$attrs['data-item'])
            const index =  JSON.parse(tab.$attrs['data-index'])
            this.TabIndex = index
            this.onGetPointComps(data.codeId)
        },
        onGetPointComps(codeID){
            if(codeID){
                getPointComps({
                    CodeID:codeID
                }).then(res=>{
                    if(res.isSuccess){
                        this.pointCompList = res.data || []
                    }
                })
            }else{
                this.pointCompList = []
            }
        },
        handleRemoveTag(tab){
            const removeIndex = this.lineSetList.findIndex(item => item.codeId == tab);
            if (removeIndex === -1) return;
            
            const pointName = this.lineSetList[removeIndex].pointName;
            this.$delete(this.lineSetList, removeIndex);

            if (tab === this.tabsValue) {
                if (this.lineSetList.length > 0) {
                    this.TabIndex = 0;
                    this.tabsValue = this.lineSetList[0].codeId.toString();
                    this.onGetPointComps(this.tabsValue);
                } else {
                    this.tabsValue = '';
                    this.TabIndex = 0;
                }
            }
        },
        handleChangeYLine(val){
            this.lineSetList[this.TabIndex].axisTp = val
        },
        handleChangePointComp(data){
            this.lineSetList[this.TabIndex].INSTR_ID = data.instR_ID
            this.lineSetList[this.TabIndex].unit = data.unit
            this.lineSetList[this.TabIndex].COMP = data.comp
        },
        handleSelectIcon(name){
            const _list = [...this.lineSetList]
            const _data = {..._list[this.TabIndex]}
            _data.icon = name
            _list[this.TabIndex] = {..._data}
            this.lineSetList = [..._list]
        },
        handleSetLineData(){
            const list = []
            const blank = this.lineSetList.filter(item=> {return item.COMP == undefined || item.COMP == '' || item.color == undefined || item.color == ''})
            if(blank.length > 0){
                this.$message.error(`${blank[0].pointName}测点有分量或线颜色未进行设置，不能提交!`)
                return false
            }else{
                this.lineSetList.forEach((item,index)=>{
                    const _data = {
                        ID:item.id || 0,
                        codeID:item.codeId,
                        INSTR_ID:item.INSTR_ID || 0,
                        LineID:this.lineId || 0,
                        pointName:item.pointName,
                        unit:item.unit,
                        COMP:item.COMP,
                        DtModeID:item.dtModeID,
                        DT1:item.DT1 || '',
                        DT2:item.DT2 || '',
                        axisTp:item.axisTp,
                        color:item.color || '',
                        blod:item.blod || 1,
                        icon:item.icon || 0,
                        index:item.index || index + 1
                    }
                    list.push(_data)
                })

                setLineInfos(list).then(res=>{
                    if(res.isSuccess){
                        const _data = [...res.data]
                        this.$message.success('配置保存成功')
                        this.$emit('saveSetDialog',_data)
                        this.dialogVisible = false
                    }
                })
            }
        },
    }
})
</script>

<style scoped lang="scss">
.set-wrapper {
    display: flex;
    height: 600px;
    gap: 10px;
}

/* 左侧样式 */
.set-left {
    width: 350px;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
}
.menu-select{
    margin-bottom: 10px;
}

.count-badge {
    background: #e6f7ff;
    color: #1890ff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.tree-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f7fa;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
    font-weight: 500;
}

.tree {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 4px 0;
}

.node-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.node-name {
    flex: 1;
}

.node-actions {
    margin-left: 8px;
    ::v-deep .el-button--mini.is-circle{
        padding:2px !important
    }
}

/* 右侧样式 */
.set-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 16px;
}

.selected-count {
    font-size: 14px;
    color: #606266;
}

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: white;
    border-radius: 8px;
    border: 1px dashed #dcdfe6;
}


/* 标签页样式 */
.tabs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
}

.config-tabs {
    flex-shrink: 0;
}

.config-tabs >>> .el-tabs__item {
    position: relative;
    padding-right: 30px;
}

.tab-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #f0f7ff;
    color: #1890ff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 4px;
}

.config-form-container {
    flex: 1;
    padding:0 20px;
    overflow-y: auto;
}



.point-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
}

.point-details {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #606266;
}

.config-form {
    max-width: 100%;
}

.form-item-with-tip {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 分量选择器 */
.comp-selector {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
}

.selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f5f7fa;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;
}

.selector-header .count {
    font-size: 12px;
    color: #909399;
}

.comp-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    width:560px;
}

.comp-item {
    padding: 4px 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.comp-item:hover {
    background: #f5f7fa;
}

.comp-item.active {
    background: #e6f7ff;
    border-color: #1890ff;
}

.comp-name {
    font-weight: 500;
    color: #303133;
}

.comp-desc {
    font-size: 12px;
    color: #606266;
}

.no-comps {
    text-align: center;
    padding: 20px;
    color: #909399;
    font-style: italic;
}

/* 线条样式配置 */
.line-style-config {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.color-config, .width-config {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-config .label, .width-config .label {
    font-size: 14px;
    color: #606266;
}

.color-value, .width-value {
    font-size: 12px;
    color: #909399;
    min-width: 60px;
}

.width-slider {
    flex: 1;
    width: 200px;
}

/* 图标选择器 */
.icon-selector {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 560px;
}

.icon-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all 0.3s;
}

.icon-option:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
}

.icon-option.active {
    border-color: #1890ff;
    background: #e6f7ff;
}


.icon-preview {
    height: 24px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    i{
        font-size: 24px;
         color: #1890ff;
    }
}

.icon-name {
    font-size: 12px;
    color: #606266;
}

/* 底部按钮 */
.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    font-size: 14px;
    color: #606266;
}

.footer-info i {
    margin-right: 4px;
    color: #1890ff;
}
::v-deep .el-dialog__body{
    padding:10px 20px;
}
</style>